<script setup>
import { ref } from 'vue'

// 模拟街机排行榜数据
const arcadeRankingGames = ref([
  { id: 1, name: '拳皇97', img: 'https://via.placeholder.com/150x100/FF33A8/FFFFFF?text=拳皇97', score: '327,500', player: '玩家001', coins: 1 },
  { id: 2, name: '三国志2', img: 'https://via.placeholder.com/150x100/33A8FF/FFFFFF?text=三国志2', score: '2,625,178', player: '玩家002', coins: 1 },
  { id: 3, name: '合金弹头', img: 'https://via.placeholder.com/150x100/3357FF/FFFFFF?text=合金弹头', score: '299,790', player: '玩家003', coins: 2 },
  { id: 4, name: '泡泡龙', img: 'https://via.placeholder.com/150x100/A833FF/FFFFFF?text=泡泡龙', score: '2,899,240', player: '玩家004', coins: 1 },
  { id: 5, name: '合金弹头X', img: 'https://via.placeholder.com/150x100/33FFA8/FFFFFF?text=合金弹头X', score: '1,135,729', player: '玩家005', coins: 1 },
  { id: 6, name: '合金弹头2', img: 'https://via.placeholder.com/150x100/33FF57/FFFFFF?text=合金弹头2', score: '1,388,790', player: '玩家006', coins: 1 },
  { id: 7, name: '炸弹人机皇版', img: 'https://via.placeholder.com/150x100/FFC733/FFFFFF?text=炸弹人机皇版', score: '290,050', player: '玩家007', coins: 1 },
  { id: 8, name: '街霸2:四大天王', img: 'https://via.placeholder.com/150x100/33FFFC/FFFFFF?text=街霸2', score: '118,200', player: '玩家008', coins: 1 }
])
</script>

<template>
  <div class="ranking-container">
    <h1 class="page-title">街机分数全国网友排行榜</h1>
    
    <div class="ranking-list">
      <div class="ranking-header">
        <div class="rank-column">排名</div>
        <div class="game-column">游戏</div>
        <div class="player-column">玩家</div>
        <div class="score-column">最高分</div>
        <div class="coins-column">用币</div>
      </div>
      
      <div 
        v-for="(game, index) in arcadeRankingGames" 
        :key="game.id"
        class="ranking-item"
      >
        <div class="rank-column">
          <div class="rank-badge" :class="{'top-three': index < 3}">{{ index + 1 }}</div>
        </div>
        <div class="game-column">
          <div class="game-info">
            <img :src="game.img" :alt="game.name" class="game-thumbnail">
            <span class="game-name">{{ game.name }}</span>
          </div>
        </div>
        <div class="player-column">{{ game.player }}</div>
        <div class="score-column">
          <span class="score-icon">🏆</span>
          <span class="score-value">{{ game.score }}</span>
        </div>
        <div class="coins-column">{{ game.coins }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.ranking-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  margin-bottom: 30px;
  color: #333;
  position: relative;
}

.page-title::before {
  content: "🕹️";
  font-size: 28px;
}

.ranking-list {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ranking-header {
  display: flex;
  background-color: #f8f9fa;
  padding: 15px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

.ranking-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s ease;
}

.ranking-item:hover {
  background-color: #f8f9fa;
}

.ranking-item:last-child {
  border-bottom: none;
}

.rank-column {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.rank-badge.top-three {
  background-color: #ffc107;
  color: white;
}

.game-column {
  flex: 1;
  display: flex;
  align-items: center;
}

.game-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.game-thumbnail {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.game-name {
  font-weight: 500;
}

.player-column {
  width: 120px;
  display: flex;
  align-items: center;
}

.score-column {
  width: 150px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}

.coins-column {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.score-icon {
  color: #ffc107;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .player-column {
    display: none;
  }
  
  .game-thumbnail {
    width: 40px;
    height: 30px;
  }
  
  .rank-column {
    width: 60px;
  }
  
  .score-column {
    width: 120px;
  }
  
  .coins-column {
    width: 60px;
  }
}

@media (max-width: 480px) {
  .ranking-header {
    display: none;
  }
  
  .ranking-item {
    flex-wrap: wrap;
  }
  
  .game-column {
    width: calc(100% - 120px);
  }
  
  .coins-column {
    width: 60px;
  }
  
  .score-column {
    width: 100%;
    justify-content: flex-end;
    margin-top: 10px;
    padding-left: 60px;
  }
}
</style>